<<template>
	<el-dialog :title="title" :visible.sync="show" width="85%" :close-on-click-modal='false'>
    <div style="position: relative"> 
        <div style="margin-bottom: 20px;">
          <label>段落名称：</label>
            <el-input
              placeholder="请输入段落名称"
              v-model="name"
              style="width: 210px; margin-left: 15px;">
            </el-input>
        </div>
    </div>
    <div>
      <el-row :gutter="10">
        <el-col :span="6">
          <div class="grid-content">
            <div style="margin: 10px;">
              <el-input v-model="like.value" placeholder="请输入短语名搜索" style="width: 168px;"></el-input>
              <el-button type="primary" v-on:click="getPhraseList">查询</el-button>
            </div>
            <ul class="cus_list">
              <li v-for="item in phraseList" :key="item.id" @click="select(item)" :class="{cur: item.id == selectPhrase.id }">
                {{item.name}}
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content sec">
            <i class="el-icon-plus" @click="add"></i>
            <!-- <i class="el-icon-minus" @click="del"></i> -->
            <div class="p-wrap clearfix">
              <PhraseCard v-for="(item, index) in phrases" :data="item" :key="index" :item="selectPhrase" :index="index" 
                @remove="remove"
                @addSubPhrase="addSubPhrase"
                @delSubPhrase="delSubPhrase"
                @changeSubPhraseType="changeSubPhraseType">
              </PhraseCard>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="margin-top: 20px;" v-if ="showPreview" v-html="previewPhrase"></div>
	  <div slot="footer" class="dialog-footer">
	    <el-button @click="show = false">取 消</el-button>
      <el-button @click="preview">{{previewText}}</el-button>
      <el-button @click="save">确定</el-button>
	  </div>
	</el-dialog>
</template>
<script>
import api from "../../../api/api";
import PhraseCard from "./MultiPhraseCard.vue";

export default {
  props: {
    id: null
  },
  created() {
    this.getPhraseList();
    this.getDetail();
  },
  components: {
    PhraseCard
  },
  computed: {
    title() {
      return this.id ? "编辑段落" : "新建段落";
    }
  },
  data() {
    return {
      show: true,
      atomId: null,
      phraseList: [],
      selectPhrase: {},
      phrases: [],
      like: {
        key: "name",
        value: ""
      },
      previewText: "预览",
      previewPhrase: "",
      showPreview: false,
      name: ""
    };
  },
  methods: {
    getPhraseList() {
      let filters = [
        {
          type: "1",
          key: "status",
          value: 1
        }
      ];
      let para = {
        currentPage: 0,
        pageNumb: 1000,
        wheres: JSON.stringify(filters),
        like: JSON.stringify(this.like),
        order: "id",
        tableName: "phrase"
      };
      api
        .getList(para)
        .then(res => {
          if (res.ret == 0) {
            this.phraseList = res.data.dataList;
          }
        })
        .catch(e => {
          this.$message({
            type: "error",
            message: "获取短语列表失败"
          });
        });
    },
    getDetail() {
      if (this.id) {
        api
          .getDataByID({
            tableName: "paragraph",
            id: this.id
          })
          .then(res => {
            if (res.ret == 0) {
              let template = res.data.template;
              let data = JSON.parse(template);
              this.name = res.data.name;
              this.phrases = data;
              // data.forEach((item) => {
              //   this.phrases = this.phrases.concat(item.phrases);
              // })
              // (this.name = res.data.name), (this.content = res.data.template);
            } else {
              this.$message({
                type: "error",
                message: "查询短语信息失败！"
              });
            }
          })
          .catch(e => {
            this.$message({
              type: "error",
              message: "查询短语信息失败！"
            });
          });
      }
    },
    select(item) {
      this.selectPhrase = item;
    },
    remove(item, index) {
      this.phrases.splice(index, 1);
    },
    delSubPhrase(index, subIndex) {
      this.phrases[index].phrases.splice(subIndex, 1);
      if (this.phrases[index].phrases.length == 0) {
        this.phrases.splice(index, 1);
      }
    },
    addSubPhrase(index) {
      if (this.selectPhrase) {
        this.phrases[index].phrases.push(this.selectPhrase);
      }
    },
    changeSubPhraseType(index, type) {
      this.phrases[index].type = type;
    },
    add() {
      if (this.selectPhrase) {
        this.phrases.push({
          type: 1,
          phrases: [this.selectPhrase]
        });
      }
    },
    preview() {
      if (this.showPreview) {
        this.showPreview = false;
        this.previewText = "预览";
        return;
      }
      let form = {};
      var list = [];
      this.phrases.forEach(item => {
        let obj = {};
        obj.type = item.type; //单个去短语,
        obj.phrases = [];
        item.phrases.forEach(ele => {
          if (ele.id) {
            obj.phrases.push({
              id: ele.id,
              name: ele.name,
              status: ele.status
            });
          }
        });
        list.push(obj);
      });
      form.template = JSON.stringify(list);
      api
        .getPreviewParagraph({
          form: form
        })
        .then(res => {
          this.previewPhrase = res.data;
          this.showPreview = true;
          this.previewText = "关闭预览";
        })
        .catch(e => {});
    },
    save() {
      if (this.name.length > 0) {
        let form = {};
        if (this.id) {
          form.id = this.id;
        }
        form.name = this.name;
        var list = [];
        this.phrases.forEach(item => {
          let obj = {};
          obj.type = item.type; //单个去短语,
          obj.phrases = [];
          item.phrases.forEach(ele => {
            if (ele.id) {
              obj.phrases.push({
                id: ele.id,
                name: ele.name,
                status: ele.status
              });
            }
          });
          list.push(obj);
        });

        form.template = JSON.stringify(list);
        api
          .addOrEditSubmit({
            tableName: "paragraph",
            form: form
          })
          .then(res => {
            if (res.ret == 0) {
              this.$message({
                type: "success",
                message: "添加或者更新段落成功！"
              });
              this.show = false;
              this.$emit("refresh");
            } else {
              this.$message({
                type: "error",
                message: "添加或者更新段落失败！"
              });
            }
          })
          .catch(e => {
            this.$message({
              type: "error",
              message: "添加或者更新段落失败！"
            });
          });
      }
      //console.log(this.content);
    }
  },
  watch: {
    show(val) {
      if (!val) {
        this.$emit("closedialog");
      }
    }
  }
};
</script>



